﻿// TickerEditor Class definition
var TickerEditor = Class.create();
TickerEditor.prototype = {
    // standard initialization function when "new" is called
	initialize: function () {
	    this.tagId = "";
	    this.index = "";
	    this.headerText = "";
	    this.tickerText = "";
	    this.container = null;
	    this.fontSelect = null;
	    this.fontColorSelect = null;
	    this.customColorBtn = null;
	    this.imageTagSelect = null;
	    this.dataTagSelect = null;
	    this.tickerTextArea = null;
	    this.xml = null;
	    this.fonts = [];
	    this.fontColors = [];
	    this.imageTags = [];
	    this.dataTags = [];
	},
	
	// function to load any initial values into the object
	load: function (index, headerText, tickerText, container, xml, tickerTextArea) {
		this.tagId = "tickerEditor_" + index;
		this.index = index;
		this.headerText = headerText;
		this.tickerText = tickerText;
        this.container = container;
        this.xml = xml;
        this.tickerTextArea = tickerTextArea;
        for (var i=0, len=xml.getElementsByTagName('FONT').length; i<len; i++)
            this.fonts.push(xml.getElementsByTagName('FONT')[i]);
        for (var i=0, len=xml.getElementsByTagName('COLORFONT').length; i<len; i++)
            this.fontColors.push(xml.getElementsByTagName('COLORFONT')[i]);
        for (var i=0, len=xml.getElementsByTagName('IMAGETAG').length; i<len; i++)
            this.imageTags.push(xml.getElementsByTagName('IMAGETAG')[i]);
        for (var i=0, len=xml.getElementsByTagName('DATATAG').length; i<len; i++)
            this.dataTags.push(xml.getElementsByTagName('DATATAG')[i]);
	    
	    // cached observers for editor behaviors
		this.cachedInsertFontTag = this.insertFontTag.bindAsEventListener(this);
		this.cachedInsertFontColorTag = this.insertFontColorTag.bindAsEventListener(this);
		this.cachedShowCustomFontColorPopup = this.showCustomFontColorPopup.bindAsEventListener(this);
		this.cachedInsertImageTag = this.insertImageTag.bindAsEventListener(this);
		this.cachedInsertDataTag = this.insertDataTag.bindAsEventListener(this);
	},
	
	// function to render the editor in html and assign behaviors to elements
	render: function () {
        
        // create elements for ticker editor
        // create ticker editor container
        var tickerEditorContainer = document.createElement('div');
        tickerEditorContainer.className = "row";
        tickerEditorContainer.id = this.tagId;
        
        // first row of elements
        var row1 = document.createElement('div');
        row1.className = "row";
        var col1 = document.createElement('div');
        col1.className = "col widthL";
        var labelStr = document.createElement('label');
        var span = document.createElement('span');
        span.innerHTML = (this.headerText != '') ? (this.headerText + " " + this.index) : "";
        var link = document.createElement('a');
        link.innerHTML = "Preview";
        link.className = "right";
        link.style.display = "none";
        link.id = "tickerTextPreviewLink_" + this.index;
  
        // second row of elements
        var row2 = document.createElement('div');
        row2.className = "row";
        row2.style.paddingBottom = "0px";
        
        var col2a = document.createElement('div');
        col2a.className = "col";
        this.fontSelect = document.createElement('select');
        this.fontSelect.style.maxWidth = "173px";
        var index = this.index;
        Event.observe(this.fontSelect, 'change', this.cachedInsertFontTag);
        var fontDefaultOption = document.createElement('option');
        fontDefaultOption.value = -1;
        fontDefaultOption.text = "Insert Font Tag";
        this.fontSelect.options.add(fontDefaultOption);
        // add font options
        for (var i=0, len=this.fonts.length; i<len; i++) {
            var optionEl = document.createElement('option');
            optionEl.text = this.fonts[i].getAttribute('Name');
            optionEl.value = this.fonts[i].getAttribute('Name');
            this.fontSelect.options.add(optionEl);
        } 
        var spacerA = document.createElement('div');
        spacerA.className = "spacerM";
        
        var col2b = document.createElement('div');
        col2b.className = "col";
        this.fontColorSelect = document.createElement('select');
        this.fontColorSelect.style.maxWidth = "173px";
        Event.observe(this.fontColorSelect, 'change', this.cachedInsertFontColorTag);
        var fontColorDefaultOption = document.createElement('option');
        fontColorDefaultOption.value = -1;
        fontColorDefaultOption.text = "Insert Font Color Tag";
        this.fontColorSelect.options.add(fontColorDefaultOption);
        // add pre-defined font color options
        for (var i=0, len=this.fontColors.length; i<len; i++) {
            var optionEl = document.createElement('option');
            optionEl.value = this.fontColors[i].getAttribute('HexValue');
            optionEl.text = this.fontColors[i].getAttribute('Name') + " (#" + optionEl.value + ")";
            this.fontColorSelect.options.add(optionEl);
        }
        var spacerB = document.createElement('div');
        spacerB.className = "spacerM";
        
        var col2c = document.createElement('div');
        col2c.className = "col";
        this.customColorBtn = document.createElement('input');
        this.customColorBtn.setAttribute('type', 'button');
        this.customColorBtn.setAttribute('value', 'Custom Font Color');
        Event.observe(this.customColorBtn, 'click', this.cachedShowCustomFontColorPopup);
        var spacerC = document.createElement('div');
        spacerC.className = "spacerM";
        
        var col2d = document.createElement('div');
        col2d.className = "col";
        this.imageTagSelect = document.createElement('select');
        this.imageTagSelect.style.maxWidth = "173px";
        Event.observe(this.imageTagSelect, 'change', this.cachedInsertImageTag);
        var imageTagDefaultOption = document.createElement('option');
        imageTagDefaultOption.value = -1;
        imageTagDefaultOption.text = "Insert Image Tag";
        this.imageTagSelect.options.add(imageTagDefaultOption);
        // add image tag options
        for (var i=0, len=this.imageTags.length; i<len; i++) {
            var optionEl = document.createElement('option');
            optionEl.text = this.imageTags[i].getAttribute('Name');
            optionEl.value = this.imageTags[i].getAttribute('ID');
            this.imageTagSelect.options.add(optionEl);
        }
        var spacerD = document.createElement('div');
        spacerD.className = "spacerM";
        
        var col2e = document.createElement('div');
        col2e.className = "col";
        this.dataTagSelect = document.createElement('select');
        this.dataTagSelect.style.maxWidth = "173px";
        Event.observe(this.dataTagSelect, 'change', this.cachedInsertDataTag);
        var dataTagDefaultOption = document.createElement('option');
        dataTagDefaultOption.value = -1;
        dataTagDefaultOption.text = "Insert Data Tag";
        this.dataTagSelect.options.add(dataTagDefaultOption);
        // add data tag options
        for (var i=0, len=this.dataTags.length; i<len; i++) {
            var optionEl = document.createElement('option');
            optionEl.text = this.dataTags[i].getAttribute('Name');
            optionEl.value = this.dataTags[i].getAttribute('ID');
            this.dataTagSelect.options.add(optionEl);
        }
        
        // text area for ticker text (optional)
        var appendTextArea = false;
        if (this.tickerTextArea == null) {
            this.tickerTextArea = document.createElement('textarea');
            this.tickerTextArea.className = "heightM widthXL";
            this.tickerTextArea.id ="tickerTextArea_" + this.index;
            appendTextArea = true;
        }
        
        // set attribute for link now that tickerText element exists
        link.setAttribute('onclick', 'showTextStringPreview("'+ this.tickerText.id + '");');
  //    link.setAttribute('onclick', 'var text = $('+text.id+').value; showAlertPopup('Text String Preview', text, hideAlertPopup);');        
        
        // append row1 elements
        labelStr.appendChild(span);
        labelStr.appendChild(link);
        col1.appendChild(labelStr);
        row1.appendChild(col1);
        
        // append row2 elements
        col2a.appendChild(this.fontSelect);
        row2.appendChild(col2a);
        row2.appendChild(spacerA);
        col2b.appendChild(this.fontColorSelect);
        row2.appendChild(col2b);
        row2.appendChild(spacerB);
        col2c.appendChild(this.customColorBtn);
        row2.appendChild(col2c);
        row2.appendChild(spacerC);
        col2d.appendChild(this.imageTagSelect);
        row2.appendChild(col2d);
        row2.appendChild(spacerD);
        col2e.appendChild(this.dataTagSelect);
        row2.appendChild(col2e);
        if (appendTextArea) {
            row2.appendChild(this.tickerTextArea);
            row2.style.border = "1px solid #aaa";
            row2.style.background = "#ddd";
            row2.style.width = "812px";
            row2.style.padding = "5px";
        }
        
        // append rows to ticker editor container
        tickerEditorContainer.appendChild(row1);
        tickerEditorContainer.appendChild(row2);
        this.container.appendChild(tickerEditorContainer);
        
        // load ticker text if it exists
        if (this.tickerText != "") this.tickerTextArea.value = this.tickerText;
    },
    
    // function to destroy this ticker editor and all its elements
    destroy: function () {
        if ($(this.tagId)) $(this.tagId).remove();
    },
    
    // function to insert text at cursor location
    insertAtCursor: function (value)
    {
        var textArea = this.tickerTextArea;
        if (textArea.selectionStart || textArea.selectionStart == '0') {
            var startPos = textArea.selectionStart;
            var endPos = textArea.selectionEnd;
            textArea.value = textArea.value.substring(0, startPos) + value +
                textArea.value.substring(endPos, textArea.value.length);
            textArea.selectionStart = startPos;
            textArea.selectionEnd = startPos + value.length;
        } else { // just append
         textArea.selectionStart = textArea.value.length;
         textArea.value += value;
         textArea.selectionEnd = textArea.value.length;
        }
        textArea.focus();
   },  

    // function to insert selected font tag
    insertFontTag: function (e) {
	    var eventEl = Event.element(e);
	    if (!eventEl) return;
	    var selectedIndex = eventEl.selectedIndex;
	    if (selectedIndex == 0) return;
	    // create font tag string and insert
	    var tagStr = "[Font Val=\"" + eventEl.value + "\"]";
	    this.insertAtCursor(tagStr);
	    // return option to default
	    eventEl.selectedIndex = 0;
    },
    
    // function to insert selected font tag from given list
    insertFontTagFromList: function (eventEl) {
	    var selectedIndex = eventEl.selectedIndex;
	    if (selectedIndex == 0) return;
	    // create font tag string and insert
	    var tagStr = "[Font Val=\"" + eventEl.value + "\"]";
	    this.insertAtCursor(tagStr);
	    // return option to default
	    eventEl.selectedIndex = 0;
    },
    
    // function to insert selected font color tag
    insertFontColorTag: function (e) {
	    var eventEl = Event.element(e);
	    if (!eventEl) return;
	    var selectedIndex = eventEl.selectedIndex;
	    if (selectedIndex == 0) return;
	    // create font color tag string and insert
	    var tagStr = "[Color Val=\"#" + eventEl.value + "\"]";
	    this.insertAtCursor(tagStr);
	    // return option to default
	    eventEl.selectedIndex = 0;
    },
    
    // function to insert selected font color tag from given list
    insertFontColorTagFromList: function (eventEl) {
	    var selectedIndex = eventEl.selectedIndex;
	    if (selectedIndex == 0) return;
	    // create font color tag string and insert
	    var tagStr = "[Color Val=\"#" + eventEl.value + "\"]";
	    this.insertAtCursor(tagStr);
	    // return option to default
	    eventEl.selectedIndex = 0;
    },    
    
    // function to show popup for custom font color and assign activeTickerEditor
    showCustomFontColorPopup: function (e) {
	    var eventEl = Event.element(e);
	    if (!eventEl) return;
	    activeTickerEditor = this;
	    var top = Position.realOffset(eventEl)[1] - 25;
	    $('customFontColorPopup').style.top = top + "px";
	    $('customFontColorPopup').style.display = "block";
	    $('txtCustomColor_Hex').focus();
    },
    
    // function to show popup for custom font color and assign activeTickerEditor
    showCustomFontColorPopupFromList: function (eventEl) {
	    activeTickerEditor = this;
	    var top = Position.realOffset(eventEl)[1] - 25;
	    $('customFontColorPopup').style.top = top + "px";
	    $('customFontColorPopup').style.display = "block";
	    $('txtCustomColor_Hex').focus();
    },    
    
    // function to insert selected image tag
    insertImageTag: function (e) {
	    var eventEl = Event.element(e);
	    if (!eventEl) return;
	    var selectedIndex = eventEl.selectedIndex;
	    if (selectedIndex == 0) return;
	    // insert image tag
	    this.insertAtCursor(eventEl.options[selectedIndex].text);
	    // return option to default
	    eventEl.selectedIndex = 0;
    },
    
    // function to insert selected image tag from given list
    insertImageTagFromList: function (eventEl) {
	    var selectedIndex = eventEl.selectedIndex;
	    if (selectedIndex == 0) return;
	    // insert image tag
	    this.insertAtCursor(eventEl.options[selectedIndex].text);
	    // return option to default
	    eventEl.selectedIndex = 0;
    },    
    
    // function to insert selected data tag
    insertDataTag: function (e) {
	    var eventEl = Event.element(e);
	    if (!eventEl) return;
	    var selectedIndex = eventEl.selectedIndex;
	    if (selectedIndex == 0) return;
	    // insert data tag
	    this.insertAtCursor(eventEl.options[selectedIndex].text);
	    // return option to default
	    eventEl.selectedIndex = 0;
    },
    
    // function to insert selected data tag from list
    insertDataTagFromList: function (eventEl) {
	    var selectedIndex = eventEl.selectedIndex;
	    if (selectedIndex == 0) return;
	    // insert data tag
	    this.insertAtCursor(eventEl.options[selectedIndex].text);
	    // return option to default
	    eventEl.selectedIndex = 0;
    }    
}
	
